<template>
    <div>
        <el-card shadow="hover" header="投入图表">
            <div style="height: 500px" ref="timeInvestedRef"></div>
        </el-card>
    </div>
</template>

<script lang="ts">
import { toRefs, reactive, defineComponent, onMounted, onActivated, watch, nextTick, ref } from 'vue'
import * as echarts from 'echarts'
import { storeToRefs } from 'pinia'
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'
import 'echarts-wordcloud'
export default defineComponent({
	name: 'timeInvested',
    setup() {
        const timeInvestedRef = ref()
        const storesTagsViewRoutes = useTagsViewRoutes()
        const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes)
        const state = reactive({myCharts: [],})
        // 批量设置 echarts resize
		const initEchartsResizeFun = () => {
			nextTick(() => {
				for (let i = 0; i < state.myCharts.length; i++) {
					(<any>state.myCharts[i]).resize()
				}
			})
		}
		// 批量设置 echarts resize
		const initEchartsResize = () => {
			window.addEventListener('resize', initEchartsResizeFun)
		}
        const initChartsInvestment = () => {
			const myChart = echarts.init(timeInvestedRef.value)
			const option = {
                title: {
                    text: 'Basic Radar Chart'
                },
                legend: {
                    data: ['Allocated Budget', 'Actual Spending']
                },
                radar: {
                    // shape: 'circle',
                    indicator: [
                    { name: 'Sales' },
                    { name: 'Administration' },
                    { name: 'Information Technology' },
                    { name: 'Customer Support' },
                    { name: 'Development' },
                    { name: 'Marketing' }
                    ]
                },
                series: [
                    {
                    name: 'Budget vs spending',
                    type: 'radar',
                    data: [
                        {
                        value: [4200, 3000, 20000, 35000, 50000, 18000],
                        name: 'Allocated Budget'
                        },
                        {
                        value: [5000, 14000, 28000, 26000, 42000, 21000],
                        name: 'Actual Spending'
                        }
                    ]
                    }
                ]
            }
			myChart.setOption(option);
			(<any>state.myCharts).push(myChart)
		}
        // 页面加载时
		onMounted(() => {
            initChartsInvestment()
            initEchartsResize()
        })
        // 由于页面缓存原因，keep-alive
		onActivated(() => {
			initEchartsResizeFun()
		})
		// 监听 vuex 中的 tagsview 开启全屏变化，重新 resize 图表，防止不出现/大小不变等
		watch(
			() => isTagsViewCurrenFull.value,
			() => {
				initEchartsResizeFun()
			}
		)
        
        return {
            timeInvestedRef,
			...toRefs(state),
		}
    }
})
</script>
